<template>
  <div class="live-guests" v-if="data.guests && data.guests.length > 0">
    <hr class="horizontal-line_gray"/>
    <h3 class="mes-box_title " >直播阵容：</h3>
    <ul class="live-guests-list">
      <li class="live-guests-item" v-for="item in data.guests">
        <div class="live-guests-poster_contain">
          <img :src="item.guestPic" alt="">
        </div>
        <p class="name">{{ item.guestName }}</p>
      </li>            
    </ul>
  </div>
</template>
<script>
  export default {
    props: {
      data: {
        type: Object,
        default: {}
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "~common/style/variables";
  .live-guests {
    margin-top: -.48rem;
  }
  .mes-box_title {
    font-size: .45rem;
    font-weight: 400;
  }
  .live-guests-list {
    margin: 0 -.3rem;
    font-size: 0;
    padding-bottom: .3rem;
  }
  .live-guests-item {
    width: 25%;
    padding: 0 .3rem;
    display: inline-block;
    text-align: center;
    .name {
      padding: .3rem 0;
      font-size: .33rem;
    }
  }
  .live-guests-poster_contain {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-top: 100%;
    height: 0;
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }    
  } 
</style>
